<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>五子棋</title>
    <link href="./game.css" rel="stylesheet" />
    <script src="./canvas.js" type="text/javascript"></script>
    <script src="./player.js" type="text/javascript"></script>
    <script src="./game_control.js" type="text/javascript"></script>
    <script src="./ai.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="header">
      <span>五子棋游戏</span>
      <span>made by self</span>
    </div>
    <div class="mainbar">
      <canvas id="canvas" width="660px" height="660px"> </canvas>
      <div class="sidebar">
        <div class="game-info">
          <div id="black-marks"></div>
          <div id="white-marks"></div>
        </div>
        <button class="btn new-btn">新游戏</button>
        <button class="btn last-btn">悔棋</button>
        <button class="btn change-btn">选择对手</button>
      </div>
    </div>
    <!-- 选择对手 -->
    <!-- <div class="message-box" id="choose-box">
      <div>请选择电脑状态</div>
      <div id="choose-buttons">
        <button class="btn c-btn" id="choose-black">执黑棋</button> -->
        <!-- <button class="btn c-btn" id="choose-white">执白棋</button>
        <button class="btn c-btn" id="choose-none">不用电脑</button>
        <button class="btn c-btn" id="choose-all">全用电脑</button>
      </div>
    </div>
    <!-- 结束一场游戏后 -->
    <!-- <div class="message-box" id="game-over-box">
      <div id="game-result"></div>
      <button class="btn c-btn" id="replay">再来一局</button>
      <button class="btn c-btn" id="ok">确认</button>
    </div> -->
    <!-- 选择电脑水平 -->
    <!-- <div class="message-box" id="AI-strength-box">
      <div id="AI-strength">请选择电脑技术含量</div>
      <button class="btn c-btn ai-st" id="AI-st">萌新</button>
    </div>
    <script src="./game_control.js" type="text/javascript"></script>
    <script src="./chess.js"></script>
    <script src="./canvas.js" type="text/javascript"></script>
  </body>
<!-- </html>  -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <link href="./game.css" type="text/css" rel="stylesheet">
    <script src="./ai.js" type="text/javascript"></script>
    <script src="./canvas.js" type="text/javascript"></script>
    <script src="./chess.js" type="text/javascript"></script>
    <script src="./game_control.js" type="text/javascript"></script>
    <script src="./player.js" type="text/javascript"></script>
</head>
<body>
<!--标题-->
<p class="header"><span>五子棋游戏</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-size:small;"> made by self</span>
</p>
<!--游戏主界面-->
<div class="mainbar">
    <!--棋盘-->
    <canvas id="canvas" width="660px" height="660px"></canvas>
    <!--按钮区-->
    <div id="buttons" class="sidebar">
        <div id="game-marks" class="game-info">
            <div class="marks" id="black-marks"></div>
            <br/>
            <div class="marks" id="white-marks"></div>
        </div>
        <button class="btn" id="btn-new">新游戏</button>
        <button class="btn" id="btn-last">上一步</button>
        <button class="btn" id="btn-next">下一步</button>
        <button class="btn" id="btn-change-style">选择对手</button>
        <div id="game-msg"></div>
    </div>
</div>
<!--创建游戏选项-->
<div class="message-box" id="choose-box">
    <div>请选择电脑状态</div>
    <div id="choose-buttons">
        <button class="btn c-btn" id="choose-black">执黑棋</button>
        <button class="btn c-btn" id="choose-white">执白棋</button>
        <button class="btn c-btn" id="choose-none">不用电脑</button>
        <button class="btn c-btn" id="choose-all">全用电脑</button>
    </div>
</div>
<!--游戏结局-->
<div class="message-box" id="game-over-box">
    <div id="game-result"></div>
    <button class="btn c-btn" id="replay">再来一局</button>
    <button class="btn c-btn" id="ok">确认</button>
</div>
<!--电脑技术含量-->
<div class="message-box" id="AI-strength-box">
    <div id="AI-strength">请选择电脑技术含量</div>
    <button class="btn c-btn ai-st" id="AI-st-1">高级</button>
    <button class="btn c-btn ai-st" id="AI-st-2">中极</button>
    <button class="btn c-btn ai-st" id="AI-st-3">低中级</button>
    <button class="btn c-btn ai-st" id="AI-st-4">萌新</button>
</div>
</body>
</html>
